﻿<div class="container-fluid">
    <div class="row px-3">
        <div class="col-md-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Single file upload</RadzenText>
                <RadzenUpload Url="upload/single" Progress=@(args => OnProgress(args, "Single file upload")) class="w-100">
                </RadzenUpload>
            </RadzenCard>
        </div>
        <div class="col-md-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Upload with icon</RadzenText>
                <RadzenUpload Url="upload/single" Icon="upload" ChooseText="" Progress=@(args => OnProgress(args, "Upload with icon"))>
                </RadzenUpload>
            </RadzenCard>
        </div>
        <div class="col-md-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Custom HTTP headers</RadzenText>
                <RadzenUpload Url="upload/single" Progress=@(args => OnProgress(args, "Custom HTTP headers")) class="w-100">
                    <RadzenUploadHeader Name="Authorization" Value="Bearer <token>" />
                    <RadzenUploadHeader Name="X-Uploaded-By" Value="Radzen" />
                </RadzenUpload>
            </RadzenCard>
        </div>
        <div class="col-md-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Multiple files upload</RadzenText>
                <RadzenUpload Multiple="true" Url="upload/multiple" Progress=@(args => OnProgress(args, "Multiple files upload")) class="w-100" />
            </RadzenCard>
        </div>
        <div class="col-md-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Upload images only</RadzenText>
                <RadzenUpload Multiple="true" Accept="image/*" Url="upload/multiple" Progress=@(args => OnProgress(args, "Images only upload")) class="w-100" />
            </RadzenCard>
        </div>
        <div class="col-md-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Upload with additional parameter</RadzenText>
                <RadzenUpload Multiple="true" Accept="image/*" Url=@($"upload/{customParameter}") Progress=@(args => OnProgress(args, "Upload with additional parameter")) class="w-100" />
            </RadzenCard>
        </div>
        <div class="col-md-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Upload Complete event</RadzenText>
                <RadzenUpload Url="upload/single" Complete=@OnComplete class="w-100" />
            </RadzenCard>
        </div>
        <div class="col-md-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Manual Upload</RadzenText>
                <RadzenUpload @ref="upload" Auto="false" Multiple="true" Url="upload/multiple" Change=@(args => OnChange(args, "Manual Upload"))
                        Progress=@(args => OnProgress(args, "Manual Upload")) class="w-100" />
                <RadzenButton Text="Upload" Click=@(args => upload.Upload()) class="d-block mt-4" />
            </RadzenCard>
        </div>
        <div class="col-md-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Using RadzenProgressBar</RadzenText>
                <RadzenUpload Url="upload/single" Progress=@TrackProgress Complete=@CompleteUpload class="w-100" />
                <RadzenProgressBar Value=@progress class="mt-4" Visible=@showProgress />
                <RadzenButton Text="Cancel" Click=@(args => CancelUpload()) class="d-block mt-4" Visible=@showProgress />
                <RadzenLabel Visible=@showComplete class="mt-4" Text=@completionMessage />
            </RadzenCard>
        </div>
        <div class="col-md-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Specify upload parameter name</RadzenText>
                <RadzenUpload Url="upload/specific" ParameterName="myName" Progress=@(args => OnProgress(args, "Upload with specified parameter name")) class="w-100" />
            </RadzenCard>
        </div>
    </div>
</div>

<EventConsole @ref=@console />

@code {
    EventConsole console;

    RadzenUpload upload;

    int progress;
    bool showProgress;
    bool showComplete;
    string completionMessage;
    bool cancelUpload = false;

    void CompleteUpload(UploadCompleteEventArgs args)
    {
        if (!args.Cancelled)
            completionMessage = "Upload Complete!";
        else
            completionMessage = "Upload Cancelled!";

        showProgress = false;
        showComplete = true;
    }

    void TrackProgress(UploadProgressArgs args)
    {
        showProgress = true;
        showComplete = false;
        progress = args.Progress;

        // cancel upload
        args.Cancel = cancelUpload;

        // reset cancel flag
        cancelUpload = false;
    }

    void CancelUpload()
    {
        cancelUpload = true;
    }

    int customParameter = 1;

    void OnChange(UploadChangeEventArgs args, string name)
    {
        foreach (var file in args.Files)
        {
            console.Log($"File: {file.Name} / {file.Size} bytes");
        }

        console.Log($"{name} changed");
    }

    void OnProgress(UploadProgressArgs args, string name)
    {
        console.Log($"{args.Progress}% '{name}' / {args.Loaded} of {args.Total} bytes.");

        if (args.Progress == 100)
        {
            foreach (var file in args.Files)
            {
                console.Log($"Uploaded: {file.Name} / {file.Size} bytes");
            }
        }
    }

    void OnComplete(UploadCompleteEventArgs args)
    {
        console.Log($"Server response: {args.RawResponse}");
    }
}